<template>
  <h1>App...</h1>
  <p>{{ count }}</p>
  <button @click="update">update</button>
  <Child :age="18" @say="say" />
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import Child from "./Child.vue";

export default defineComponent({
  name: "App",
  components: {
    Child,
  },
  // 组合式 和 响应式 API
  setup() {
    // 所有代码都写在setup函数中
    // 定义响应式数据
    const count = ref<number>(0); // 返回值是一个响应式数据，传入的值就是数据初始化值
    // 定义methods
    const update = () => {
      // 更新ref数据 -> 更新其value
      count.value++;
    };

    const say = () => {
      console.log("hello");
    };
    // 返回一个对象
    // 对象上所有属性都会挂载到组件实例上
    return {
      count,
      update,
      say,
    };
  },
  // data() {
  //   return {
  //     count: 0,
  //   };
  // },
  // methods: {
  //   update() {
  //     this.count++;
  //   },
  // },
});
</script>

<style>
</style>
